<script setup>
import { ref, provide, computed, onMounted } from 'vue'
import {useRoute } from 'vue-router'
import Sidebar from './components/Sidebar.vue'
import Topbar from './components/Topbar.vue'

const route = useRoute()

// 侧边栏收缩状态
const isSidebarCollapsed = ref(false)

// 提供侧边栏状态给子组件
provide('isSidebarCollapsed', isSidebarCollapsed)

// 监听侧边栏状态变化
const updateSidebarState = (collapsed) => {
  isSidebarCollapsed.value = collapsed
}

// 检查是否显示主布局（除了登录页面都显示主布局）
const showMainLayout = computed(() => {
  return route.name !== 'Login'
})

// 暴露方法给子组件调用
defineExpose({
  updateSidebarState
})

onMounted(() => {
})
</script>

<template>
  <div id="app">
    <!-- 登录页面布局 -->
    <div v-if="!showMainLayout" class="login-layout">
      <router-view />
    </div>
    
    <!-- 主应用布局（登录后） -->
    <div v-else class="main-layout">
      <Sidebar ref="sidebar" />
      <div class="main" :class="{ 'sidebar-collapsed': isSidebarCollapsed }">
        <Topbar />
        <main class="content">
          <router-view />
        </main>
      </div>
    </div>
  </div>
</template>

<style>
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}

body { 
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
}

#app {
  height: 100vh;
  background: var(--bg);
  overflow: hidden;
}

/* 登录页面布局 */
.login-layout {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

/* 主应用布局 */
.main-layout {
  display: flex;
  height: 100vh;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  transition: margin-left 0.3s ease-in-out;
}

.main.sidebar-collapsed {
  margin-left: 0;
}

.content {
  padding: 0;
  flex: 1;
  background: var(--bg);
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
